<template>
	<div class="device">
		<view class="top">
			<image :src="getSrc(deviceImage)" mode="" class="device_img"></image>
			<image src="../../../static/images/icons/switch.png" mode="" class="switch_img"></image>
		</view>
		<view class="under">
			<text>{{deviceDescription}}</text><br/>
			<text class="status">开</text>
		</view>

	</div>
</template>

<script>
	export default {
		name: 'Device',
		props: {
			deviceImage: {
				type: String,
				required: true,
				default: 'No description provided',
			},
			deviceDescription: {
				type: String,
				default: 'No description provided',
			},
		},
		data() {
			return {};
		},
		methods: {
			getSrc(deviceImage){
				const src = "../../../static/images/icons/"+this.deviceImage;
				return src;
			},
			// 这里可以添加方法，比如点击事件处理等  
		},
	};
</script>

<style scoped>

	.device {
		background-color: #ffffff;  
		border-radius: 50rpx;
		display: flex;
		flex-direction: column;
		/* margin-bottom: 20rpx; */
		height: 230rpx;
		width: 230rpx;
		border: 1rpx solid #f1f3f9;
		box-sizing: border-box;
		padding: 35rpx;
		box-shadow: 2rpx 2rpx 2rpx 2rpx rgba(237, 237, 237,0.75);
	}

	.top  {
		height: 50rpx;
		width: 150rpx;
		margin-top: 0rpx;
		margin-bottom: 25rpx;
		margin-left: 0rpx;
	}

	.device_img{
		
		height: 65rpx;
		width: 65rpx;
		
	}
	.switch_img{
		height: 30rpx;
		width: 30rpx;
		margin-left: 55rpx;
		margin-bottom: 25rpx;
	}
	text {
		margin-left: 5rpx;
		font-size: 40rpx;
		 font-weight: bold;
	}
	.status{
		color:rgba(173, 173, 173, 0.5) ;
		font-size: 25rpx;
	}
</style>